<template>
  <div class="authentication-section p-tb-100">
    <div class="container">
      <div class="authentication-header mb-30">
        <ul>
          <li>
            <a :href="'/user/login'" class="active">Login</a>
          </li>
          <li>
            <a :href="'/user/register'">Register</a>
          </li>
        </ul>
      </div>
      <div class="authentication-box">
        <div class="authentication-box-inner">
          <form class="authentication-form mb-20">
            <div class="input-group input-group-bg mb-20">
              <span class="input-group-text" id="basic-addon1">
                <i class="flaticon-user"> </i>
              </span>
              <input
                type="text"
                v-model="loginFormData.username"
                class="form-control"
                placeholder="Username / Email address"
                aria-label="Username"
                aria-describedby="basic-addon1"
              />
            </div>
            <div class="input-group input-group-bg mb-20">
              <span class="input-group-text" id="basic-addon2">
                <i class="flaticon-key"></i>
              </span>
              <input
                type="password"
                v-model="loginFormData.password"
                class="form-control"
                placeholder="Enter password"
                aria-label="Username"
                aria-describedby="basic-addon2"
              />
            </div>
            <div class="authentication-account-access mb-20">
              <div class="authentication-account-access-item">
                <div class="input-checkbox input-checkbox-secondcolor">
                  <input type="checkbox" id="check1" />
                  <label for="check1">Remember Me!</label>
                </div>
              </div>
              <div class="authentication-account-access-item">
                <div class="authentication-link">
                  <a :href="'/user/forget-password'">Forget password?</a>
                </div>
              </div>
            </div>
            <button
              type="button"
              class="btn main-btn main-btn-secondary full-width"
              @click="loginByPassword()"
            >
              Login Now
            </button>
          </form>
          <div class="authentication-divider">
            <span>OR</span>
          </div>
          <ul class="social-list social-list-btn">
            <li class="social-btn-fb">
              <a href="#" target="_blank">
                <i class="flaticon-facebook"></i>
              </a>
            </li>
            <li class="social-btn-gm">
              <a href="https://mail.google.com/" target="_blank">
                <i class="flaticon-google-plus-logo"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <!--  -->
      <div class="authentication-box">
        <div class="authentication-box-inner">
          <q-form class="authentication-form mb-20">
            <div class="input-group input-group-bg mb-20">
              <span class="input-group-text" id="basic-addon1">
                <i class="flaticon-user"> </i>
              </span>
              <q-input
                outlined
                v-model="loginFormData.username"
                type="text"
                class="form-control"
                placeholder="Username / Email address"
                :rules="[
                  (val) => (val && val.length > 0) || 'Please type something',
                ]"
              />
            </div>
            <div class="input-group input-group-bg mb-20">
              <span class="input-group-text" id="basic-addon2">
                <i class="flaticon-key"></i>
              </span>
              <q-input
                outlined
                v-model="loginFormData.password"
                type="password"
                class="form-control"
                placeholder="Enter password"
                :rules="[
                  (val) => (val && val.length > 0) || 'Please type password',
                ]"
              />
            </div>
            <div class="authentication-account-access mb-20">
              <div class="authentication-account-access-item">
                <div class="input-checkbox input-checkbox-secondcolor">
                  <q-checkbox v-model="rememberMe" label="Remember Me!" />
                </div>
              </div>
              <div class="authentication-account-access-item">
                <div class="authentication-link">
                  <a :href="'/user/forget-password'">Forget password?</a>
                </div>
              </div>
            </div>
            <button
              type="button"
              class="btn main-btn main-btn-secondary full-width"
              @click="loginByPassword()"
            >
              Login Now
            </button>
          </q-form>
          <div class="authentication-divider">
            <span>OR</span>
          </div>
          <ul class="social-list social-list-btn">
            <li class="social-btn-fb">
              <a href="#" target="_blank">
                <i class="flaticon-facebook"></i>
              </a>
            </li>
            <li class="social-btn-gm">
              <a href="https://mail.google.com/" target="_blank">
                <i class="flaticon-google-plus-logo"></i>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from "src/stores/user";
const userStore = useUserStore();

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  loginFormData: {
    username: "admin",
    password: "123456",
  },
  rememberMe: false,
});
const { loginFormData, rememberMe } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const loginByPassword = () => {
  userStore
    .LoginByPassword(data.loginFormData)
    .then(() => {
      var path = proxy.$route.query.redirect || "/";
      proxy.$router.push({ path: path });
    })
    .catch(() => {});
};
</script>
<style lang="scss" scoped>
// 避免q-form使用bootstrap-grid样式
.q-form {
  :deep(.row > *) {
    flex-shrink: 0;
    width: auto;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
    margin-top: 0;
  }

  :deep(.row) {
    --bs-gutter-x: 0;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0;
    margin-right: 0;
    margin-left: 0;
  }
}
</style>
